{% extends "base.html" %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0">账户设置</h4>
            </div>
            <div class="card-body">
                <!-- 头像上传 -->
                <div class="row mb-4">
                    <div class="col-md-4 text-center">
                        <div class="mb-3">
                            <img class="rounded-circle account-img" 
                                 src="{{ url_for('static', filename='profile_pics/' + current_user.image_file) }}" 
                                 alt="头像" 
                                 style="width: 150px; height: 150px; object-fit: cover;">
                        </div>
                        <form method="POST" enctype="multipart/form-data">
                            <div class="mb-3">
                                <label for="picture" class="form-label">更换头像</label>
                                <input class="form-control" type="file" id="picture" name="picture" 
                                       accept=".jpg,.jpeg,.png,.gif">
                                <div class="form-text">支持 JPG, PNG, GIF 格式，最大 2MB</div>
                            </div>
                    </div>
                    <div class="col-md-8">
                        <h5>个人信息</h5>
                        <div class="mb-3">
                            <label for="username" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="username" name="username" 
                                   value="{{ current_user.username }}" required>
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">邮箱</label>
                            <input type="email" class="form-control" id="email" name="email" 
                                   value="{{ current_user.email }}" required>
                        </div>
                    </div>
                </div>

                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary">更新信息</button>
                    <a href="{{ url_for('user_profile', username=current_user.username) }}" 
                       class="btn btn-outline-secondary">返回资料页</a>
                </div>
                </form>
            </div>
        </div>

        <!-- 账户操作卡片 -->
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="mb-0">账户操作</h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{{ url_for('reset_password') }}" class="btn btn-outline-warning">修改密码</a>
                    <a href="{{ url_for('user_profile', username=current_user.username) }}" 
                       class="btn btn-outline-info">查看个人资料</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}